<template>
	<div class="registered">
		<h2 class='title'>忘记密码</h2>
		<p class='tip'>找回你的密码</p>
		<group class='group'>
			
			<x-input title="手机号 :" ref='tel' type="tel" :required='true' autofocus="autofocus" @on-change="change" v-model="tel"></x-input>

		</group>

		<x-button class='button' :disabled='isDisabled' @click.native='' type="primary">下一步</x-button>
		<div class="return" @click="goBack">
			<img src="../assets/return.png" alt="">
		</div>

	</div>
</template>
<script>
	import {
		XInput,
		Group,
		XButton,
		Selector 
	} from 'vux'

	export default {
		components: {
			XInput,
			Group,
			XButton,
			Selector 
		},
		data() {
			return {
				title:'身份 :',
				value:'家长',
				option:['老师','家长'],
				user: '',
				pass: '',
				tel: '',
				isDisabled: true,
			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			change() {
				var isUserValid = this.$refs.user.valid;
				var isPassValid = this.$refs.pass.valid;
				var isTelValid = this.$refs.tel.valid;
				var isVaild = isUserValid && isPassValid && isTelValid;
				this.isDisabled = isVaild ? false : true;
			},
			goBack() {
				this.$router.back();
			},
			registered() {
				console.log("注册")
				// 				this.$router.push({
				// 					path: '/home'
				// 				})
			}
		},


	}
</script>

<style lang="less" scoped="scoped">
	.registered {
		width: 100%;
		height: 100%;
		text-align: center;
		overflow: hidden;
		background: #ECE9E6;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to left, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to left, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		
		
		.title {
			padding-top: 50px;
			font-size: 24px;
		}

		.tip {
			font-size: 12px;
			padding-top: 5px;

		}

		.group {
			margin-bottom: 20px;
		}

		.return {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 10px;
			left: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>
